import React, { useState } from 'react'
import { NavBar, Space, Toast, Button, Modal, Divider, Input } from 'antd-mobile'
import { CloseOutline, MoreOutline, SearchOutline, RightOutline, AntOutline, ArrowDownCircleOutline, ExclamationCircleFill, EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
import "../css/zyh_wdmp.css"
import { useNavigate } from "react-router-dom"
import img1 from "../image/user1.jpg"
import img2 from "../image/user2.jpg"
import img3 from "../image/user3.jpg"
import img4 from "../image/user4.jpg"
import img5 from "../image/user5.jpg"
import img6 from "../image/user6.jpg"
const ZYH_WDMP = () => {
    const [value, setValue] = useState('')
    const [visible, setVisible] = useState(false)
    const right = (
        <div style={{ fontSize: 24 }}>
            <Space style={{ '--gap': '16px' }}>
                <SearchOutline />
                <MoreOutline />
            </Space>
        </div>
    )
    const router = useNavigate()
    const back = () => {
        router("/layouts/user")
    }
    const [showname, setShowname] = useState(false)
    const [showcontext, setShowcontext] = useState(false)
    const [showsex, setShowsex] = useState(false)
    const [showshengr, setShowshengr] = useState(false)
    const [showaddress, setShowaddress] = useState(false)
    const showzhe = () => {
        if (showname || showcontext || showsex || showshengr || showaddress) {
            return true
        } else {
            return false
        }
    }
    const [from,setfrom] = useState({
        name: "",
        context: "",
        sex: "",
        shengr: "",
        address: ""
    })
    const [name,setname] = useState("")
    const upfromname=()=>{
        setShowname(false)
        setfrom({...from,name:name})
        setname("")
    }
    const noupdate=()=>{
        setname("")
        setShowname(false)
        setcontext("")
        setShowcontext(false)
        setshengr("")
        setShowshengr(false)
        setaddress("")
        setShowaddress(false)
        setsex("")
        setShowsex(false)
    }
    const [context,setcontext] = useState("")
    const upfromcontext=()=>{
        setShowcontext(false)
        setfrom({...from,context:context})
        setcontext("")
    }
    const [shengr,setshengr] = useState("")
    const upfromshengr=()=>{
        setShowshengr(false)
        setfrom({...from,shengr:shengr})
        setshengr("")
    }
    const [address,setaddress] = useState("")
    const upfromaddress=()=>{
        setShowaddress(false)
        setfrom({...from,address:address})
        setaddress("")
    }
    const [sex, setsex] = useState("")
    const upfromsex=()=>{
        setShowsex(false)
        setfrom({...from,sex:sex})
        setsex("")
    }
    const setupsex=()=>{
        setsex("")
        setShowsex(false)
    }
    let imglist = [img1,img2,img3,img4,img5,img6]
    const [showimg,setshowimg] = useState(img1)
    const upimg=()=>{
        const randomIndex = Math.floor(Math.random() * imglist.length);
        // 设置当前显示的图片为随机选择的图片
        setshowimg(imglist[randomIndex]);
    }
    return (
        <div className='zyh_wdmp_head'>
            <NavBar onBack={back} style={{ color: "white" }}>我的信息</NavBar>
            <div>
                <div>
                    <div className='zyh_wdmp_upimg'>
                        <div className='zyh_wdmp_img'>
                            <img src={showimg} alt="" style={{borderRadius:"50%"}} />
                        </div>
                        <p style={{ marginTop: "10px" }} onClick={()=>upimg()}>点击随机换头像</p>
                    </div>
                </div>
                <div className='zyh_wdmp_updata'>
                    <div className='zyh_wdmp_updata_box'>
                        <span>昵称</span>
                        <span>
                            <span>{from.name?from.name:"未填写"}</span>
                            <span style={{ marginLeft: "10px" }} onClick={() => setShowname(true)}>
                                <RightOutline />
                            </span>
                        </span>
                    </div>
                    <div className='zyh_wdmp_updata_box'>
                        <span>简介</span>
                        <span>
                            <span>{from.context?from.context:"未填写"}</span>
                            <span style={{ marginLeft: "10px" }} onClick={() => setShowcontext(true)}>
                                <RightOutline />
                            </span>
                        </span>
                    </div>
                    <div className='zyh_wdmp_updata_box'>
                        <span>性别</span>
                        <span>
                            <span>{from.sex?from.sex:"未填写"}</span>
                            <span style={{ marginLeft: "10px" }} onClick={() => setShowsex(true)}>
                                <RightOutline />
                            </span>
                        </span>
                    </div>
                    <div className='zyh_wdmp_updata_box'>
                        <span>生日</span>
                        <span>
                            <span>{from.shengr?from.shengr:"未填写"}</span>
                            <span style={{ marginLeft: "10px" }} onClick={() => setShowshengr(true)}>
                                <RightOutline />
                            </span>
                        </span>
                    </div>
                    <div className='zyh_wdmp_updata_box'>
                        <span>地区</span>
                        <span>
                            <span>{from.address?from.address:"未填写"}</span>
                            <span style={{ marginLeft: "10px" }} onClick={() => setShowaddress(true)}>
                                <RightOutline />
                            </span>
                        </span>
                    </div>
                </div>
            </div>
            <div className={showname ? "zyh_tan1" : "zyh_noshow"}>
                <h3 style={{ textAlign: "center", lineHeight: "50px" }}>昵称</h3>
                <div style={{ textAlign: "center" }}>*昵称不能为空，需2-16个字</div>
                <div>
                    <Input
                        className='zyh_wdmp_input'
                        placeholder='请输入内容'
                        value={name}
                        onChange={val => {
                            setname(val)
                        }}
                    />
                </div>
                <div className='zyh_wdmp_btn'>
                    <button className='zyh_wdmp_btn_cancel' onClick={() => noupdate()}>取消</button>
                    <button className='zyh_wdmp_btn_ok' onClick={() => upfromname() }>确定</button>
                </div>
            </div>
            <div className={showcontext ? "zyh_tan1" : "zyh_noshow"}>
                <h3 style={{ textAlign: "center", lineHeight: "50px" }}>签名</h3>
                <div>
                    <Input
                        className='zyh_wdmp_input'
                        placeholder='请输入内容'
                        value={context}
                        onChange={val => {
                            setcontext(val)
                        }}
                    />
                </div>
                <div className='zyh_wdmp_btn'>
                    <button className='zyh_wdmp_btn_cancel' onClick={() => noupdate()}>取消</button>
                    <button className='zyh_wdmp_btn_ok' onClick={() => upfromcontext()}>确定</button>
                </div>
            </div>
            <div className={showsex ? "zyh_tan1" : "zyh_noshow"}>
                <h3 style={{ textAlign: "center", lineHeight: "50px" }}>性别</h3>
                <div className='zyh_wdmp_sex'>
                    <div className={sex=="女" ?"zyh_wdmp_sex_col_pink":"zyh_wdmp_sex_nocol"} onClick={()=>setsex("女")}>
                        <svg t="1735122743567"  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3694" width="20" height="20"><path d="M554.666667 680.021333V768h128a42.666667 42.666667 0 0 1 0 85.333333h-128v128a42.666667 42.666667 0 0 1-85.333334 0v-128h-128a42.666667 42.666667 0 0 1 0-85.333333h128v-87.978667C300.949333 659.029333 170.666667 515.413333 170.666667 341.333333 170.666667 152.810667 323.477333 0 512 0s341.333333 152.810667 341.333333 341.333333c0 174.08-130.282667 317.696-298.666666 338.688zM256 341.333333c0 141.376 114.624 256 256 256s256-114.624 256-256S653.376 85.333333 512 85.333333 256 199.957333 256 341.333333z" fill="#e6e6e6" p-id="3695"></path></svg>  女
                    </div>
                    <div className={sex=="男"?"zyh_wdmp_sex_col_blue":"zyh_wdmp_sex_nocol"} onClick={()=>setsex("男")}>
                        <svg t="1735122939932"  viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3904" width="20" height="20"><path d="M874 120H622c-3.3 0-6 2.7-6 6v56c0 3.3 2.7 6 6 6h160.4L583.1 387.3c-50-38.5-111-59.3-175.1-59.3-76.9 0-149.3 30-203.6 84.4S120 539.1 120 616s30 149.3 84.4 203.6C258.7 874 331.1 904 408 904s149.3-30 203.6-84.4C666 765.3 696 692.9 696 616c0-64.1-20.8-124.9-59.2-174.9L836 241.9V402c0 3.3 2.7 6 6 6h56c3.3 0 6-2.7 6-6V150c0-16.5-13.5-30-30-30zM408 828c-116.9 0-212-95.1-212-212s95.1-212 212-212 212 95.1 212 212-95.1 212-212 212z" fill="#e6e6e6" p-id="3905"></path></svg>    男
                    </div>
                </div>
                <div className='zyh_wdmp_btn'>
                    <button className='zyh_wdmp_btn_cancel' onClick={() => noupdate()}>取消</button>
                    <button className='zyh_wdmp_btn_ok' onClick={() => upfromsex()}>确定</button>
                </div>
            </div>
            <div className={showshengr ? "zyh_tan1" : "zyh_noshow"}>
                <h3 style={{ textAlign: "center", lineHeight: "50px" }}>生日</h3>
                <div>
                    <Input
                        className='zyh_wdmp_input'
                        placeholder='请输入内容'
                        value={shengr}
                        onChange={val => {
                            setshengr(val)
                        }}
                    />
                </div>
                <div className='zyh_wdmp_btn'>
                    <button className='zyh_wdmp_btn_cancel' onClick={() => noupdate()}>取消</button>
                    <button className='zyh_wdmp_btn_ok' onClick={() => upfromshengr()}>确定</button>
                </div>
            </div>
            <div className={showaddress ? "zyh_tan1" : "zyh_noshow"}>
                <h3 style={{ textAlign: "center", lineHeight: "50px" }}>地区名称</h3>
                <div>
                    <Input
                        className='zyh_wdmp_input'
                        placeholder='请输入内容'
                        value={address}
                        onChange={val => {
                            setaddress(val)
                        }}
                    />
                </div>
                <div className='zyh_wdmp_btn'>
                    <button className='zyh_wdmp_btn_cancel' onClick={() => noupdate()}>取消</button>
                    <button className='zyh_wdmp_btn_ok' onClick={() => upfromaddress()}>确定</button>
                </div>
            </div>
            <div className={showzhe() ? "zyh_zhezc" : "zyh_noshow"}></div>
        </div>
    )
}
export default ZYH_WDMP